<template>
  <div>
    <div class="control">
      <!-- 全部状态 -->
      <div class="inputItem">
        <div class="title">外部车队名称</div>
        <div class="inputBox">
          <el-input v-model="key" @keyup.enter.native="cread"> </el-input>
        </div>
      </div>
      <!-- 查询 -->
      <el-button type="primary" size="small" icon="el-icon-search" @click="cread">筛选</el-button>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" style="width: 100%" ref="table2">
          <el-table-column align="center" width="60" prop="serialNumber" label="序号">
            <template slot-scope="scope">
              {{ scope.$index * ((pageCurrent - 1) * 10 + 1) + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="fleet_id" label="外部车队编号">
          </el-table-column>
          <el-table-column align="center" prop="fleet_name" label="外部车队名称">
          </el-table-column>
          <el-table-column align="center" prop="fleet_name" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status!=0">正常</div>
              <div v-else>解绑审核中</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="deleteFleet(scope.row.fleet_id)" v-if="scope.row.status!=0">解绑</el-button>
                <el-button type="text" size="small" @click="
                  $router.push({
                    path: '/home/fleetManagement/details',
                    query: { fleetId: scope.row.fleet_id, type: 'external' },
                  })
                  ">详情</el-button>
              </div>

            </template>

          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
          :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <p><span style="color: red">*</span> 选择外部车队</p>
      <div style="margin-top: 10px">
        <el-input size="small" :readOnly="true" v-model="fleedName" placeholder="请选择外部车队">
          <template slot="append">
            <div style="cursor: pointer" @click="Selectcargoe">
              选择外部车队
            </div>
          </template>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVi">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="外部车队信息" :visible.sync="DialogVisible" center class="fpkp-dialog">
      <el-row class="flex-fpkp" style="display: flex; margin-bottom: 20px">
        <el-col :md="10" class="ipt-qym">
          <el-input placeholder="请输入外部车队名" clearable v-model="key">
          </el-input>
        </el-col>
        <el-col class="cxbt" style="margin-left: 15px">
          <el-button type="primary" @click="qyxz">查询</el-button>
        </el-col>
      </el-row>
      <!-- 无数据时显示 -->
      <div class="null-png" v-if="cargoemood.length == 0">
        <div>
          <img src="/null.png" alt="" />
          <p>暂无数据</p>
        </div>
      </div>
      <el-table v-else class="xzc" style="width: 100%; overflow-y: scroll; height: 500px" :data="cargoemood"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
        }" highlight-current-row row-class-name="row-class">
        <el-table-column prop="fleetName" label="外部车队名称" align="center"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作按钮" align="center">
          <template slot-scope="scope">
            <div class="cmd-bt-config">
              <el-button type="primary" style="margin-bottom: 10px" @click="cargoeXuan(scope.row)">选择</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="block">
          <el-pagination layout="prev, pager, next" :total="50" @current-change="xzxc">
          </el-pagination>
        </div> -->
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      dialogVisible: false,
      /* 搜索end*/
      data: {
        total: "",
        size: "",
        pages: "",
      },
      records: [],
      pageCurrent: 1, //当前页码
      pageSize: 10, //每页10条
      key: "",
      DialogVisible: false,
      fleedName: "",
      CargoOwnerValue: "",
      cargoemood: [],
      fleetId: "",
    };
  },
  methods: {
    async request(id) {
      let res = await this.$http.fleetManagementApi.delExternalFleet({
        fleetId: id,
      });
      if (res.data.code == "200") {
        this.$message.success("解绑成功");
        this.cread();
      }
    },
    deleteFleet(e) {
      let that = this;
      this.$confirm("此操作将解绑外部车队", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.request(e);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async dialogVi() {
      let res = await this.$http.fleetManagementApi.addExternalFleet({
        fleetId: this.fleetId,
      });
      if (res.data.code == "200") {
        this.$message.success("新增成功");
        this.dialogVisible = false;
        this.cread();
      }
    },
    async qyxz() {
      let cont = [];
      if (this.key) {
        this.cargoemood.forEach((item, i) => {
          if (item.fleetName.indexOf(this.key) != -1) {
            cont.push(item);
          }
        });
        this.cargoemood = cont;
      } else {
        this.Selectcargoe();
      }
    },
    async Selectcargoe() {
      let res = await this.$http.fleetManagementApi.queryBindingExternalFleet({
        name: this.CargoOwnerValue,
      });
      let mood = [];
      res.data.data.forEach((item, i) => {
        item.list.forEach((item, i) => {
          mood.push(item);
        });
      });
      //console.log(mood);
      this.cargoemood = mood;
      this.DialogVisible = true;
    },
    cargoeXuan(e) {
      this.fleedName = e.fleetName;
      this.fleetId = e.fleetId;
      this.DialogVisible = false;
      this.CargoOwnerValue = "";
    },
    add() {
      this.dialogVisible = true;
    },
    changePages(e) {
      this.pageCurrent = e;
      this.cread();
    },
    async cread() {
      let res = await this.$http.fleetManagementApi.queryExternalFleet({
        pageIndex: this.pageCurrent,
        pageSize: this.pageSize,
        fleetName: this.key,
      });
      this.records = res.data.data;
      this.data = res.data.data;
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop;
      //console.log(res.target.scrollTop);
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table2.bodyWrapper.addEventListener(
      "scroll",
      this.scrollEvent,
      false
    );
    // 激活设置滚动位置
    this.$refs.table2.bodyWrapper.scrollTop = this.$route.meta.scrollTop;
  },

  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table2.bodyWrapper.removeEventListener(
      "scroll",
      this.scrollEvent
    );
    next();
  },
  created() {
    this.cread();
  },
};
</script>

<style lang="scss" scoped>
.control {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }

    ::v-deep .el-input__icon {
      line-height: 0;
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 266px);

  background-color: #fff;

  .list {
    height: calc(100% - 48px);
    padding: 0 30px;

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 361px) !important;
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      height: 48px;
      padding: 0;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .tag {
      width: 63px;
      height: 28px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      margin: 0 auto;

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin-right: 4px;
      }

      &.yellow {
        background-color: #fffce8;
        color: #f9aa0d;

        .dian {
          background-color: #f9aa0d;
        }
      }

      &.dispatched {
        background-color: #ecf5fe;
        color: #1890ff;

        .dian {
          background-color: #1890ff;
        }
      }

      &.red {
        background-color: #fde8e9;
        color: #f7555d;

        .dian {
          background-color: #f7555d;
        }
      }
    }

    .stateBtns {
      height: 30px;
      width: 76px;

      ::v-deep .el-button {
        height: 30px;
        width: 76px;
        font-size: 12px;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 30px;
      }

      .waitPass {
        background-color: #ecf5fe;
        color: #1890ff;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
      }
    }
  }

  .paginationBox {
    border-top: 1px solid #f0f0f0;
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;
    padding: 0 30px;

    .pagination {
      margin-left: auto;
    }
  }
}

.dialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 20px;
  }

  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
  }

  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #1890ff;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
    transition: 0.2s;

    &:hover {
      color: #1890ff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    transition: 0.2s;

    &:hover {
      opacity: 0.8;
    }
  }
}

.nullPng {
  height: 300px;
  width: 100%;
  font-weight: 600;
  display: flex;
  justify-content: center;

  & div {
    text-align: center;
  }
}
</style>
